<template>
  <header>
    <div class="wrapper">
      <ul class="" style="width: 100%; display: flex; justify-content: space-between">
        <li><RouterLink to="/">Home</RouterLink></li>
        <li><RouterLink to="/about">About</RouterLink></li>
        <li><RouterLink to="/menu">Menu</RouterLink></li>
        <li><RouterLink to="/autocomplete">autocomplete</RouterLink></li>
        <li><RouterLink to="/tooltip">tooltip</RouterLink></li>
        <li><RouterLink to="/product">Product</RouterLink></li>
      </ul>
    </div>
  </header>
  <div id="content" ref="content">content</div>
  <div id="wrap" ref="wrap">wrap</div>
  <div>
    <img
      src="@/assets/01.jpg"
      v-zoom-img="{
        src: '@/assets/01.jpg'
      }"
    />
  </div>
  <RouterView></RouterView>
</template>
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import { onMounted, ref, watchEffect } from 'vue'
//import { useMouse } from '@vueuse/core'

//const { x, y, sourceType } = useMouse()
//console.log(x)
const wrap = ref<HTMLElement | null>(null)

const content = ref<HTMLElement | null>(null)

onMounted(() => {
  //console.log(content.value)
})
</script>

<style lang="scss" scoped>
// .zzh-popper__arrow {
//   height: 10px;
//   position: absolute;
//   width: 10px;
// }
// .zzh-popper__arrow::before {
//   --el-text-color-primary: green;
//   border-top-left-radius: 2px;
//   background: var(--el-text-color-primary);
//   box-sizing: border-box;
//   content: ' ';
//   height: 10px;
//   position: absolute;
//   width: 10px;
//   z-index: -1;
//   transform: rotate(45deg);
//   border-bottom-color: transparent !important;
//   border-right-color: transparent !important;
//   border: 1px solid black;
//   // border-color: black;
// }
header {
  line-height: 1.5;
  max-height: 100vh;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
  }
}
</style>
